<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <multiuse-button size="small" type="primary" @click="downloadHandle('CODE_4400003_1')">导出</multiuse-button>
        <multiuse-button size="small" type="primary" @click="downloadHandle('CODE_4400003_2')">明细导出</multiuse-button>
      </template>
    </FilterTable>

    <!-- 明细窗口 -->
    <Drawer
      :visible.sync="visibleDrawer"
      title="理赔退货过账单明细"
      :width="1100"
      @close="closeDrawer"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
      >
      <detail :rowData="rowData" @close="closeDrawer"/>
    </Drawer>

    <!-- 服务商查询 -->
    <BaseDialog
      :visible.sync="visibleDealer"
      :title="'服务商查询'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <ownerSeacher  @close="closeDealerHandler" />
    </BaseDialog>

  </div>
</template>

<script>
// import
import { dictionary } from '@/utils/dictMixin';
import detail from '@/pages/partsmanage/claimRefundManage/components/transferQueryDetail.vue';
import ownerSeacher from '@/pages/partsmanage/claim/approve/ownerSeacher';
import { getPartTransferQuery,exporturl} from '@/api/partsmanage/shipment/query';

export default {
  mixins:[dictionary],
  name: "partTransferQuery",
  data () {
    // 这里存放数据
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchApi: getPartTransferQuery,
      fetchParams: { xhrAbort: true },
      visibleDrawer: false,
      visibleDealer: false,
      rowData: null
    }
  },
  // import 引入的组件需要注入到对象中才能使用
  components: {
    detail,
    ownerSeacher
  },
  props: {},
  // 方法集合
  methods: {
    handle(rowData, operaType) {
      this.visibleDrawer = true;
      this.rowData = rowData;
    },
    async downloadHandle(code) {
      // 若列表数据为空，提示“数据为空，无法导出”
      let getPageInfo = this.$refs.table.GET_PAGE_INFO();
      if (Number(getPageInfo.total) === 0) {
        return this.$notify.warning({ title: '提示信息', message: '数据为空，无法导出!' });
      }

      let json = Object.assign({}, { CODE: code}, this.fetchParams);
      let res = await exporturl(json);
      if (res.resultCode == 200) {
        this.$router.push('/admin/auth/oem/downloadCenter');
      }
    },
    closeDrawer(refreshTab) {
      this.visibleDrawer = false;
      if (refreshTab) {
        this.fetchParams = { ...this.fetchParams };
      }
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.$refs.table.$refs.pageTable.EXECUTE_RESET_HEIGHT();
      });
    },
    searchDealer() {
      this.visibleDealer = true
    },
    closeDealerHandler(val) {
      if(val){
        this.topFilterList.find(x=>x.fieldName=='dealerCode').initialValue=val.dealerCode;
        this.topFilterList.find(x=>x.fieldName=='dealerName').initialValue=val.dealerShortname;
      }
      this.visibleDealer=false;
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },{
          title: '操作',
          dataIndex: 'column-action',
          width: 80,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.handle(props.row, 'show')}>
                  明细
                </el-button>
              </div>
            );
          }
        },{
          title: '服务商代码',
          dataIndex: 'DEALER_CODE',
          width: 120,
          sorter: true
        },{
          title: '服务商简称',
          dataIndex: 'DEALER_NAME',
          width: 150,
          sorter: true
        },{
          title: '申请单号',
          dataIndex: 'BSTKD',
          width: 180,
          sorter: true
        },{
          title: '过账单号',
          dataIndex: 'BSYSDH',
          width: 150,
          sorter: true
        },{
          title: '过账品种合计',
          dataIndex: 'BSZPZS',
          width: 120,
          sorter: true
        },{
          title: '过账数量合计',
          dataIndex: 'BSZSLS',
          width: 120,
          sorter: true
        },{
          title: '过账金额合计',
          dataIndex: 'BSAMOUNT',
          width: 150,
          precision: 2,
          numberFormat: true,
          sorter: true
        },{
          title: '开票状态',
          dataIndex: 'INVOICE_STATUS',
          width: 120,
          dictItems:this.createDictList('3051'),
          sorter: true
        },{
          title: '开票金额',
          dataIndex: 'PJHSJE',
          width: 150,
          precision: 2,
          numberFormat: true,
          sorter: true
        },{
          title: '过账时间',
          dataIndex: 'BSFYRQ',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true
        }
      ];
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '服务商代码',
          fieldName: 'dealerCode',
          placeholder: '请选择',
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.searchDealer()}></el-button>
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: '服务商简称',
          fieldName: 'dealerName',
          placeholder: '请输入',
        },{
          type: 'INPUT',
          label: '申请单号',
          fieldName: 'bscsdj'
        },{
          type: 'INPUT',
          label: '过账单号',
          fieldName: 'bsysdh'
        },{
          type: 'SELECT',
          label: '开票状态',
          fieldName: 'invoiceStatus',
          itemList: this.createDictList('3051')
        },{
          type: 'RANGE_DATE',
          fieldName: 'bsfyrqStart|bsfyrqEnd',
          label: '过账日期',
          initialValue: [],
          dateType: 'daterange'
        }
      ];
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  //过滤器
  filters: {},
  // 生命周期 - 创建之前
  beforeCreate (){
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created () {
  },
  // 生命周期 - 挂载之前
  beforeMount () {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
  },
  // 生命周期 - 更新之前
  beforeUpdate () {
  },
  // 生命周期 - 更新之后
  updated () {
  },
  // 生命周期 - 销毁之前
  beforeDestroy () {
  },
  // 生命周期 - 销毁完成
  destroyed () {
  },
  // 如果页面有 keep-alive 缓存功能,这个函数会触发
  //进入的时候触发
  activated () {
  },
  //离开的时候触发
  deactivated() {
  },
}
</script>

<style scoped>
</style>
